<template>
  <div id="FinancialMaintenance">
    <div class="query">
      <!-- --------------- -->
      <div class="homeTitle admin">
        <span>选择账户</span>
         <el-input placeholder="搜索账号/机构名称" v-model="search" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="getdata()"></el-button>
        </el-input>
      </div>
      
    </div>
    <!-- 表格 -->
    <div class="table">
      <!-- 表格 -->
      <div class="tablecon">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="city" label="地市" align="center"></el-table-column>
          <el-table-column prop="agencyLabel" label="机构标识" align="center"></el-table-column>
          <el-table-column prop="agencyType" label="机构类型" align="center"></el-table-column>
          <el-table-column prop="agencyName" label="机构名称" align="center"></el-table-column>
          <el-table-column prop="accountBank" label="开户行" align="center"></el-table-column>
          <el-table-column prop="accountName" label="账户名称" align="center"></el-table-column>
          <el-table-column prop="accountNo" label="账号" align="center"></el-table-column>
          <el-table-column prop="availableBalance" label="可用余额" align="center"></el-table-column>
          <el-table-column prop="paySysNo" label="支付系统行号" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="172">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="selected(scope.row)">选中</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
     <!-- 分页 -->
      <div class="pgfy">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <div style="text-align:center">
      <el-button type="primary" @click="goback">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "FinancialMaintenance",
  data() {
    return {
      tableData: [],
      // 分页
      currentPage: 1,
      total: null,
      search: ''
    };
  },
  mounted () {
    this.getdata(1);
  },
  methods: {
    getdata (val) {
      this.currentPage = val;
      let obj= {
        accountType: this.$route.query.type,
        page: this.currentPage,
        account: this.search
      }
      this.axios.get('interbankAccount/findAllByBank',{params:obj})
        .then(({data}) => {
          if (data.code == 200) {
            this.tableData = data.data;
            this.total = data.pageInfo.total;
          }
        })
    },
     // 分页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(val);
    },
    selected(row) {
      //选中
      sessionStorage.setItem('accountId', row.id)
      this.$router.go(-1)
    },
    goback() {
      this.$router.go(-1)
    }
  }
};
</script>

<style lang="scss">
#FinancialMaintenance {
  .homeTitle {
    &.admin {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      border-bottom: 1px solid black;
      .el-input {
        width: 300px;
      }
    }
  }
  .queryCon {
    background: white;
    padding: 0 20px 20px;
    .qSeles {
      padding-top: 20px;
      .xuanze {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        flex-wrap: wrap;
        .xuanzeCon {
          height: 40px;
          display: flex;
          align-items: center;
          margin-right: 30px;
          .el-input {
            width: 200px;
          }
        }
      }
      .btnAb {
        margin-top: 30px;
        .el-button {
          margin-right: 30px;
        }
      }
    }
  }
  .table {
    background: white;
    .tablecon {
      padding: 20px;
    }
    .pgfy {
      padding: 20px;
      padding-top: 10px;
      text-align: right;
    }
  }
}
</style>
